<!-- 网站信息 -->
<template>
  <div class="website-information" v-if="isOk">
      <el-form ref="formRef" :rules="rules" class="ls-form" :model="formData" label-width="120px">
          <el-card shadow="never" class="!border-none">
              <div class="text-xl font-medium mb-[20px]">后台设置</div>
              <el-form-item label="网站名称" prop="sys_name">
                  <div class="w-80">
                      <el-input
                          v-model.trim="formData.sys_name"
                          placeholder="请输入网站名称"
                          maxlength="30"
                          show-word-limit
                      />
                  </div>
              </el-form-item>
              <el-form-item label="网站图标" prop="sys_favicon" required>
                  <div>
                      <uploadimg v-model="formData.sys_favicon"/> 
                  </div>
              </el-form-item>
              <el-form-item label="网站LOGO" prop="sys_logo" required>
                  <div>
                      <uploadimg v-model="formData.sys_logo"/>  
                  </div>
              </el-form-item>
              <el-form-item label="登录页广告图" prop="login_image" required>
                  <div>
                      <uploadimg v-model="formData.login_image"/>  
                  </div>
              </el-form-item>
          </el-card>
  
          <el-card shadow="never" class="!border-none mt-4">
              <div class="text-xl font-medium mb-[20px]">PC端设置</div>
              <el-form-item label="PC端LOGO" prop="web_logo">
                  <div>
                      <uploadimg v-model="formData.web_logo"/>  
                  </div>
              </el-form-item>
              <el-form-item label="网站标题" prop="web_title">
                  <div class="w-80">
                      <el-input
                          v-model.trim="formData.web_title"
                          placeholder="请输入PC端网站标题"
                          maxlength="30"
                          show-word-limit
                      />
                  </div>
              </el-form-item>
              <el-form-item label="网站图标" prop="web_ico">
                  <div>
                      <uploadimg v-model="formData.web_ico"/> 
                  </div>
              </el-form-item>
              <el-form-item label="网站描述" prop="web_desc">
                  <div class="w-80">
                      <el-input
                          v-model.trim="formData.web_desc"
                          placeholder="请输入PC端网站描述"
                      />
                  </div>
              </el-form-item>
              <el-form-item label="网站关键词" prop="web_keywords">
                  <div class="w-80">
                      <el-input
                          v-model.trim="formData.web_keywords"
                          placeholder="请输入PC端网站关键词"
                      />
                  </div>
              </el-form-item>
              <el-form-item label="网站备案号" prop="record_number">
                  <div class="w-80">
                      <el-input
                          v-model.trim="formData.record_number"
                          placeholder="请输入PC端网站关键词"
                      />
                  </div>
              </el-form-item>
          </el-card>
      </el-form>
      <footer-btns v-perms="['setting/edit']">
          <el-button type="primary" @click="handleSubmit">保存</el-button>
      </footer-btns>
  </div>
</template>

<script setup name="webInformation">
import { addWebSite, getWebSiteDeail ,editWebSite} from '@/apis/website'
import { useAppStore } from '@/stores/app' 
import feedback from '@/utils/feedback'
const isOk = ref(false)
const formRef = ref()

const appStore = useAppStore()
// 表单数据
const formData = reactive({
  sys_name: '', // 网站名称
  sys_favicon: '', // 网站图标
  sys_logo: '', // 网站logo
  login_image: '', // 登录页广告图 
  web_logo: '',
  web_title: '',
  web_desc: '',
  web_ico: '',
  web_keywords: '',
  record_number:''
})

// 表单验证
const rules = {
  sys_name: [
      {
          required: true,
          message: '请输入网站名称',
          trigger: ['blur']
      }
  ],
  sys_favicon: [
      {
          required: true,
          message: '请选择网站图标',
          trigger: ['change']
      }
  ],
  sys_logo: [
      {
          required: true,
          message: '请选择网站logo',
          trigger: ['change']
      }
  ],
  login_image: [
      {
          required: true,
          message: '请选择登录页广告图',
          trigger: ['change']
      }
  ],  
  web_logo: [
      {
          required: true,
          message: '请选择PC端LOGO',
          trigger: ['change']
      }
  ],
  web_title: [
      {
          required: true,
          message: '请输入PC端网站标题',
          trigger: ['blur']
      }
  ],
  web_ico: [
      {
          required: true,
          message: '请选择PC端网站图标',
          trigger: ['change']
      }
  ]
}

// 获取备案信息
const getData = async () => {
  const data = await getWebSiteDeail() 
  for (const key in formData) {
      //@ts-ignore
      formData[key] = data[key]
  } 
  isOk.value = true
}

// 设置备案信息
const handleSubmit = async () => { 
  await formRef.value?.validate()
  await editWebSite(formData)
  appStore.getConfigData()
  getData()
  feedback.msgSuccess('更新成功');
}

getData()
</script>

<style lang="scss" scoped></style>
